<template>
  <div class="admin">
    <!--  -->
    <pagehead :rote="rote" />
    <el-table :data="tableData.list" style="width: 100%">
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="呢称" />
      <el-table-column prop="permissions_id" label="所属组别">
        <template #default="scope">
          {{ permissionName(scope.row.permissions_id) }}
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" />
      <el-table-column prop="active" label="状态">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>
              <div>呢称: {{ scope.row.name }}</div>
              <div>地址: {{ scope.row.address }}</div>
            </template>
            <template #reference>
              <el-tag :type="scope.row.active === 1 ? 'success' : 'danger'">{{
                scope.row.active === 1 ? "正常" : "异常"
              }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{
              formatDate(scope.row.create_time)
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button type="primary" @click="Edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationbox">
      <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        size="small"
        :background="true"
        layout="total, prev, pager, next"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      v-model="dialogTableVisible"
      title="编辑账号"
      width="500"
      :before-close="handleClose"
    >
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item
          label="手机号"
          label-width="100px"
          prop="mobile"
          label-position="left"
        >
          <el-input autocomplete="off" disabled :placeholder="form.mobile" />
        </el-form-item>
        <el-form-item
          label="账号名称"
          prop="name"
          label-width="100px"
          label-position="left"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="请填写账号名称"
          />
        </el-form-item>
        <el-form-item
          label="所属组别"
          label-width="100px"
          label-position="left"
          prop="permissions_id"
        >
          <el-select
            v-model="form.permissions_id"
            clearable
            placeholder="测试栏目"
            style="width: 368px"
          >
            <el-option
              v-for="item in getqx"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="consubmit(formRef)">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<!-- @click="open(scope.row) -->
<script setup>
// imports and composables
import { onMounted, reactive, ref } from "vue";
import { AuthAdmin, menuSelectlist, updateUser } from "../../../api/index";
import { useRoute } from "vue-router";
const rote = useRoute();

const formRef = ref();
const rules = reactive({
  name: [{ required: true, message: "请输入你的昵称", trigger: "blur" }],
  permissions_id: [
    { required: true, message: "请选择你的所属组别", trigger: "blur" },
  ],
});
const dialogTableVisible = ref(false);
const paginationData = reactive({
  pageNum: 1,
  pageSize: 10,
});

const tableData = reactive({
  list: [],
  total: 0,
});

const form = reactive({
  name: "",
  permissions_id: "",
});

onMounted(() => {
  getZhdata();

  menuSelectlist().then(({ data }) => {
    getqx.value = data.data;
  });
});

const getZhdata = () => {
  AuthAdmin(paginationData).then(({ data }) => {
    const { list, total } = data.data;
    tableData.list = list;
    tableData.total = total;
  });
};

function formatDate(date) {
  let data = new Date(date);
  const year = data.getFullYear();
  const month = String(data.getMonth() + 1).padStart(2, "0");
  const day = String(data.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

const getqx = ref([]);

const permissionName = (id) => {
  const data = getqx.value.find((el) => el.id === id);
  return data ? data.name : "超级管理员";
};

const Edit = (rowData) => {
  dialogTableVisible.value = true;
  Object.assign(form, {
    mobile: rowData.mobile,
    name: rowData.name,
    permissions_id: rowData.permissions_id,
  });
};

const handleClose = () => {
  dialogTableVisible.value = false;
};

const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getZhdata();
};
const handleCurrentChange = (val) => {
  paginationData.pageNum = val;
  getZhdata();
};

const consubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const { name, permissions_id } = form;
      updateUser({ name, permissions_id }).then((data) => {
        if (data.data.code === 10000) {
          dialogTableVisible.value = false;
          getZhdata();
        }
      });
    } else {
      console.log(fields, "fields");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
/* styles */
.xzbox {
  padding: 10px 0 10px 10px;
  background: #fff;
}
.paginationbox {
  padding: 10px 0;
  background: #fff;
  .el-pagination {
    padding-right: 50px;
    justify-content: flex-end;
  }
}
</style>